<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:o="http://openfaces.org/"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:t="http://myfaces.apache.org/tomahawk">

    <head>
    </head>
    <body>
        <ui:composition template="/templates/default.xhtml">
		 	<ui:define name="title">OpenHDS - Create Death</ui:define>
		
			<ui:param name="crud" value="#{deathCrud}" />
			
            <ui:define name="listing">
                <ui:include src="list.xhtml" />
            </ui:define>
            <ui:define name="display">
            
            	<h:outputText value="#{navController.breadcrumbTrail}" />
            
                <h1><h:outputText value="#{msg.deathCreate}" /></h1>
                <h:messages id="errors" globalOnly="true" />
                <h:form id="form">
                    <h:panelGrid columns="4">
                    
                        <f:verbatim><h3>Basic Information</h3></f:verbatim>
	            		<h:outputText />
	            		<h:outputText />
                    	<h:outputText />
                    
                    	<h:outputText value="#{msg.fieldWorkerId}:"/>
                    	<h:outputText />
                        <h:inputText tabindex="1" styleClass="collectedBy" autocomplete="off" id="fieldWorker" value="#{deathCrud.item.collectedBy}" disabled="#{flowScope != null}" converter="#{fieldWorkerExtIdConverter}"/>
                        <h:message for="fieldWorker" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                        
	                   	<h:outputText value="#{msg.visitId}:"/>
	                   	<h:outputText />
	                   	<h:inputText tabindex="2" styleClass="visit" autocomlete="off" id="visit" value="#{deathCrud.item.visit}" converter="#{visitExtIdConverter}" disabled="#{flowScope != null}"/>
	            		<h:message for="visit" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                    
                    	<h:outputText value="Date of Interview: (#{siteProperties.dateFormat}):" />
                        <h:outputText />
                        <o:dateChooser tabindex="3" id="recordedDate" value="#{deathCrud.recordedDate}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="recordedDate" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>		
                    	
		            	<h:outputText value="Permanent Id:"/>
		            	 <h:outputText />
		                <h:inputText tabindex="3" styleClass="individual" id="indiv" value="#{deathCrud.item.individual}" disabled="#{flowScope != null}" converter="#{individualExtIdConverter}" autocomplete="off" />
		            	<h:message for="indiv" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

						<h:outputText value="House Id:"/>
		            	<h:outputText />
		                <h:inputText tabindex="4" styleClass="location" id="loc" value="#{deathCrud.item.house}" disabled="#{flowScope != null}" converter="#{locationExtIdConverter}" autocomplete="off" />
		            	<h:message for="loc" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
						
						<h:outputText value="Household Id:"/>
		            	<h:outputText />
		                <h:inputText tabindex="5" styleClass="socialGroup" id="sg" value="#{deathCrud.item.household}" converter="#{socialGroupExtIdConverter}" autocomplete="off" />
		            	<h:message for="sg" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

						<h:outputText value="Household Name:" />
						<h:outputText />
						<h:inputText tabindex="6" id="householdName" value="#{deathCrud.item.household.groupName}" converter="#{defaultConverter}" />
						<h:message for="householdName" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
						
                        <h:outputText value="#{msg.deathDate} (#{siteProperties.dateFormat})" />
                        <h:outputText />
                        <o:dateChooser tabindex="7" id="deathDate" value="#{deathCrud.deathDate}" pattern="#{siteProperties.dateFormat}" />
                        <h:message for="deathDate" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

						<h:outputText value="Deceased Name:" />
						<h:outputText />
						<h:inputText tabindex="8" id="deceasedName" value="#{deathCrud.item.deceasedName}" converter="#{defaultConverter}" />
						<h:message for="deceasedName" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
						
						<h:outputText value="Sex:"/>
	                	<img class="clickable" onclick="O$('popupWindowForSex').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
	                	<h:inputText tabindex="9" id="gender" value="#{deathCrud.item.gender}" converter="#{genderCodesConverter}" /> 
	                	<h:message for="gender" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

                        <h:outputText value="#{msg.deathPlace}:"/>
                        <img class="clickable" onclick="O$('popupWindowForPlaceOfDeath').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
                        <h:inputText tabindex="10" id="deathPlace" value="#{deathCrud.item.deathPlace}" converter="#{defaultConverter}" />
                        <h:message for="deathPlace" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

						<h:outputText value="Other:"/>
	                    <h:outputText />
	                    <h:inputText tabindex="11" id="placeOfDeathOther" value="#{deathCrud.item.placeOfDeathOther}" converter="#{defaultConverter}" />
	                    <h:message for="placeOfDeathOther" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

	            		<f:verbatim><h3>Source of Information</h3></f:verbatim>
						<h:outputText />
						<h:outputText />
						<h:outputText />

                    	<h:outputText value="Reported By:"/>
                		<img class="clickable" onclick="O$('popupWindowForReportedBy').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
                		<h:inputText tabindex="12" id="reportedBy" value="#{deathCrud.item.reportedBy}" converter="#{defaultConverter}" />
                		<h:message for="reportedBy" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                    </h:panelGrid>
                     <script>
                   		if($('#form\\:fieldWorker').attr('disabled')) {
                       		// the implementation of the date chooser is the reason for this
                       		// hack. the date chooser text field is not reliably present in the DOM
                       		// when page execution hits this point. This will continuously check
                       		// for the date chooser element, and when found give it focus
                   		    var interval = setInterval(function() {
                   		        if ($('#form\\:recordedDate\\:\\:field').length > 0) {
                   		            if (!$('#form\\:recordedDate\\:\\:field')[0].value) {
                   		                return;
                   		            }
                   		            $('#form\\:recordedDate\\:\\:field').select();
                   		            clearInterval(interval);
                   		        }                   		     
                   		    }, 25);
                   		} else {
                   			$('#form\\:fieldWorker').focus();
                   		}
  					</script>
                    <br />
                    
                    <c:choose>
		                <c:when test="#{flowScope != null}">
		                    <h:commandButton tabindex="16" id="create" action="createDeath" value="#{msg.lblCreate}" />
		                	<h:commandButton tabindex="17" value="#{msg.lblCancel}" immediate="true" action="cancel" />
		                </c:when>
		                <c:otherwise>
		                	<h:commandButton tabindex="18" action="#{deathCrud.create}" value="#{msg.lblCreate}"/>
		                	<h:commandButton tabindex="19" value="Cancel" immediate="true" action="cancel" rendered="#{flowScope != null}"/>
		            	</c:otherwise>
		        	</c:choose>
                </h:form>
            </ui:define>
        </ui:composition>
    </body>
</html>